<template>
<div class="line-chart background-white radius-8 p-relative">
  <div class="header flex justify-between align-center p-absolute">
    <div>
      <div>

      </div>
      <div class="info">

      </div>
    </div>
    <div class="time-buttons">时间组</div>
  </div>
  <div class="chart-box h-100 w-100">
    <div class="w-100 h-100" :id="chartId">

    </div>
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
    DatasetComponent,
    GridComponent,
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    TransformComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import dayjs from 'dayjs'
export default {
    name: 'lineChart',
    props: {
        chartData: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            chartObj: {}
        }
    },
    computed: {
        chartId () {
            return 'lineChart-' + this.chartData.id
        }
    },
    created () {
        echarts.use([
            LegendComponent,
            TitleComponent,
            TooltipComponent,
            GridComponent,
            DatasetComponent,
            TransformComponent,
            LineChart,
            LabelLayout,
            UniversalTransition,
            CanvasRenderer
        ])
    },
    mounted () {
        this.init()
    },
    methods: {
        generateData () {
            // const timeType = 1 // 1小时
            const nowDate = dayjs()
            const data = []
            const xAxis = []
            for (let i = 0; i < 10; i++) {
                const allTitle = dayjs(nowDate).add(1 + i, 'minute')
                data.push({
                    name: allTitle.format('HH:mm'),
                    time: allTitle.format('YYYY-MM-DD HH:mm'),
                    value: (Math.random() * 50).toFixed(2),
                    unit: 'GHZ'
                })
                xAxis.push(allTitle.format('HH:mm'))
            }
            this.chartObj = {
                xAxis,
                data
            }
        },
        init () {
            const chartDom = document.getElementById(this.chartId)
            const myChart = echarts.init(chartDom)
            this.generateData()
            const option = {
                tooltip: {
                    trigger: 'axis',
                    enterable: true,
                    confine: true, // 限制tooltip在图标内
                    borderWidth: 3,
                    className: 'tooltip-box',
                    axisPointer: {
                        type: 'shadow', //
                        lineStyle: {
                            type: 'dashed',
                            width: 2
                        }
                    },
                    formatter: params => {
                        // 自定义tooltip
                        let res = ''
                        params.forEach(item => {
                            const { seriesName, data, color, value } = item
                            const time = data.time
                            const _value = value + data.unit
                            const str = `
                            <div class="tooltip-box radius-5 text-color1 font-12">
                                <p class="text-left">${time}</p>
                                <div class="flex align-center">
<!--                                    <span class="circle-dot radius-semi d-inline-block" style="background-color: ${color}"></span>-->
                                    <div class="">
                                        <span>
                                            ${seriesName} :
                                        </span>
                                        <span class="font-bold">${_value}</span>
                                    </div>
                                </div>
                            </div>
                          `
                            res += str
                        })
                        return res
                    }
                },
                color: ['#59BCFB'],
                legend: {
                    top: 10,
                    left: 20,
                    icon: 'circle' // 图例的图标
                },
                xAxis: {
                    type: 'category',
                    data: this.chartObj.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        showSymbol: false,
                        name: 'CPU使用率',
                        data: this.chartObj.data,
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#59bcfb' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(89,188,251,0.00)' // 100% 处的颜色
                                }]
                            }
                        }
                    }
                ]

            }
            option && myChart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.line-chart{
  height: 17.2vw;
}

</style>
